import React ,{Component} from 'react';
import {
    Text,
    View,
    StyleSheet,
    TouchableOpacity,
    Image,
    TextInput,
    ScrollView
} from 'react-native';

const headerRightIcon=(
    <View style={{flexDirection:'row',alignItems:'center'}}>
    <Image
    style={{width:20,height:20}}></Image>
    <Text style={{fontSize:18,color:'#292c33'}}>    </Text>
    </View>
  );

export default class HourTallyScreen extends Component{

    static navigationOptions=({navigation,screenProps})=>({
        headerLeft:(
            <TouchableOpacity onPress={()=>navigation.state.params.pressBack()}>
            <View style={{flexDirection:'row',alignItems:'center'}}>
            <Image source={require('../../image/icon_message_back.png')} 
            style={{width:20,height:20}}></Image>
            <Text style={{fontSize:18,color:'#292c33'}}>返回</Text>
            </View>
            </TouchableOpacity>
          ),
          headerRight:headerRightIcon,
          headerTitle:'点工记账'
    });
   
    constructor(props){
        super(props);
        this.state={ 
            selectDate:null,
            groupName:'钢筋组',
            projectName:'天安云谷',
            status:'班长',
            workerName:'',
        }
    }

    goToBack(){
        // alert('点击下一步');
        this.props.navigation.goBack(); 
    }

    componentDidMount(){
        this.props.navigation.setParams({
            pressBack:()=>this.goToBack()
        });
        var date=new Date();
        var yearMonthDay=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+'(今天)';
        this.setState({
             selectDate:yearMonthDay   
        });
    }
    
    /**
     * 选择日期
     */
    _selectDate(){
     
    }


    render(){

        return(
            <ScrollView>
            <View style={styles.contain}>
                <TouchableOpacity onPress={()=>this._selectDate}>
                <View style={styles.dateContain}>
                   <Text style={styles.dateText}>{this.state.selectDate}</Text>
                   <Image style={{height:22,width:22}} source={require('../../image/icon_message_right.png')}/>
                </View>
                </TouchableOpacity>
                <View style={styles.line}></View>

               <View style={{flexDirection:'row',height:72,marginLeft:15,marginRight:15}}>
               <Image style={styles.header} source={require('../../image/icon_chat_photo.png')}></Image>
               <View style={{position:'relative',flex:1}}>
                  <View style={{flexDirection:'row',alignItems:'center',marginTop:12}}>
                  <Text style={[styles.text,{marginLeft:8,marginTop:4}]}>{this.state.groupName}</Text> 
                  <Image style={{marginLeft:8}} source={require('../../image/widget/icon_xiangmu.png')}></Image> 
                  </View>
                  <Text style={[styles.subText,{position:'absolute',left:8,bottom:16}]}>{this.state.projectName}</Text> 
               </View>
               <TouchableOpacity style={{alignSelf:'center'}} onPress={this._goScreenForResult}>
               <Text style={{alignSelf:'center',borderColor:'#ff7733',borderWidth:1,borderRadius:4,
               paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:1,fontSize:16,color:'#ff7733'}}>切换班组</Text>
               </TouchableOpacity>
            </View> 

            <View style={styles.line}></View>

            <View style={styles.columnStyle}>
                <Text style={styles.text}>班组长</Text>
                <Text style={[styles.text,{flex:1,textAlign:'right'}]}>小明</Text>
            </View>

            <View style={{height:32,backgroundColor:'#f2f3f5',justifyContent:'center'}}>
            <Text style={[styles.subText,{marginLeft:15}]}>
                {'你在该班组的身份：'+this.state.status}
            </Text>
            </View> 

         
            <View style={styles.columnStyle}>
                <Text style={styles.text}>选择工人</Text>
                <TouchableOpacity style={{flex:1,flexDirection:'row'}}>
                <View style={{flex:1}}></View>
                <TextInput style={{fontSize:16,justifyContent:'flex-end'}} 
                 placeholder='请选择工人'
                 placeholderTextColor='#c4c6cc'
                 underlineColorAndroid={'transparent'}
                 value={this.state.workerName}
                 onChangeText={(text)=>this.setState({workerName:text})}
                > </TextInput>
                 </TouchableOpacity> 
            </View>
           

            </View>
            </ScrollView>
        );
    }
}

const styles=StyleSheet.create({
    contain:{
       flex:1,
       backgroundColor:'#ffffff'
    },
    dateText:{
        fontSize:14,
        color:'#ff7733'
    },
    dateContain:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        marginTop:10,
        marginBottom:10
    },
    line:{
        height:1,
        backgroundColor:'#e1e2e6'
    },
    header:{
        width:48,
        height:48,
        alignSelf:'center',
    },
    subText:{
        color: '#8d9199',
        fontSize: 14,
        fontWeight: 'bold'
    },
    text: {
        color: '#000000',
        fontSize: 16,
        fontWeight: 'bold'
    },
    columnStyle:{
        flexDirection:'row',
        alignItems:'center',
        height:48,
        paddingLeft:15,
        paddingRight:15
    }
});